/**
 * useDebugValue()
 *    语法：
 *      useDebugValue(value, format?)
 *        1. value - 任意内容的值，用于devtools的显示
 *        2. format - 可选的格式化函数，
 *                  该函数会收到 value 做为参数，
 *                  函数内的返回值，会作为标签显示。
 *
 *    作用：
 *      用于自定义hook, 在 devtools 中能有个更友好的提示。
 *
 * 自定义hook
 *    自己定义一个已 use 开头函数函数，函数中可以使用其他自定义hook或内置的hook
 *
 */

import { useState, useDebugValue } from "react";

/**
 * 自定义的一个 useCount
 *     用于返回一个 count 值，和一个 increment 和 decrement 方法
 *     用法：
 *      const [count, increment, decrement] =  useCount()
 *        count = 1
 *        increment()   2
 */
function useCount() {
  // 使用内置的 useState 创建一个 state 数据
  const [count, setCount] = useState(1);

  // 调用 useDebugValue()
  // useDebugValue(count % 2 === 0 ? "偶数" : "奇数");
  useDebugValue(count, (value) => {
    return value % 2 === 0 ? "偶数" : "奇数";
  });

  const increment = () => {
    console.log("increment");
    setCount((count) => count + 1);
  };

  const decrement = () => {
    console.log("decrement");
    setCount((count) => count - 1);
  };

  // 返回一个有三项内容的数组
  return [count, increment, decrement];
}

function App() {
  const [num, add, jian] = useCount();

  return (
    <div>
      <h1>App - {num}</h1>
      <button onClick={() => add()}>ADD</button>
      <button onClick={() => jian()}>JIAN</button>
    </div>
  );
}

export default App;
